<template>
  <div id="app">
    <router-view name="headerpc"></router-view>
    <transition name="fade" mode="out-in">
      <router-view class="pages"/>
    </transition>
    <router-view name="footnavphone"/>
    <router-view name="footerpc"></router-view>
    <router-view name="footerpcsub"></router-view>
  </div>
</template>

<script>

import Home from '@/pages/home/home'
import FootnavPhone from '@/components/base/phone/footnav-phone/footnav-phone'
import BcFooter from '@/components/bc-footer/bc-footer'
import { isPhone } from '@/assets/js/util.js'
import { mapMutations } from 'vuex'
export default {
  name: 'App',
  components: {
    Home,
    FootnavPhone,
    BcFooter
  },
  created() {
    this.setIsPhone(isPhone())
    window.onresize = () => {
      this.setIsPhone(isPhone())
    }
  },
  methods: {
    ...mapMutations('lottery', {
      setIsPhone: 'SET_IS_PHONE'
    })
  }
}
</script>

<style lang="stylus" scoped>

  #app 
    min-height: 100%
    height: auto
    box-sizing: border-box
    position: relative 
    background:linear-gradient(180deg, #e5e5e5, #fefbfb)
    @media screen and (min-width 750px)
      padding-bottom 90px 
    .pages 
      &.fade-enter, &.fade-leave-to 
        opacity 0
      &.fade-leave, &.fade-enter-to 
        opacity 1
      &.fade-enter-active, &.fade-leave-active 
        transition all 0.2s 
</style>
